<template>
	<view class="selfInfo">
		<!-- 导航栏 -->
		<u-navbar
		            title="个人中心"
					left-text="返回"
		            @leftClick="leftClick"
		            :autoBack="true"
					placeholder="true"
					class="navr"
		        >
		</u-navbar>
		<!-- 上半部分 -->
		<view class="selfinfoTop">
			<!-- 头像 -->
			<view class="info" @click="chooseImg">
				<text>头像</text>
				<view class="touxiang">
					<image :src="touxiang_img" mode=""></image>
				</view>
				<view class="seticon">
					<u-icon name="arrow-right" color="#c7c7c7"></u-icon>
				</view>
			</view>
			
			<!-- 昵称 -->
			<view class="info" @click="goPages(modifyName_url)">
				<text>昵称</text>
				<view class="txt">{{userName}}</view>
				<view class="seticon">
					<u-icon name="arrow-right" color="#c7c7c7"></u-icon>
				</view>
			</view>
		</view>
		
		<!-- 下半部分 -->
		<view class="selfinfoDown" v-for="item in infoArry">
			<view class="down_left">{{item.name}}</view>
			<view class="down_right">{{item.name_value}}</view>
		</view>
		
		
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				modifyName_url:'../modifyName/modifyName',
				touxiang_img:'',
				userName:'',
				infoArry:[
					{
						name:"真实姓名",
						name_value:"大昔哥"
					},
					{
						name:"性别",
						name_value:"男"
					},
					{
						name:"身份证",
						name_value:"5586**********2361"
					},
					{
						name:"手机",
						name_value:"188****8888"
					}
				]
			}
		},
		onLoad() {
			this.touxiang_img = getApp().globalData.headPortrait
			this.userName = getApp().globalData.wxName
		},
		methods: {
			// 选择图片作为头像
			chooseImg(){
				uni.chooseImage({
					count:1,
					success: res => {
						this.touxiang_img = res.tempFilePaths;
					}
				});
				
			},
			// 点击返回，把数据传给父页面
			leftClick() {
			    uni.$emit('pic',{src:this.touxiang_img,userName:this.userName});
			},

			// 传递图片参数
			delivePic(){
				
			},
			
			// 跳转页面
			goPages(url){
				uni.navigateTo({
					url
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.selfInfo{
		width: 100%;
		height: 1500rpx;
		background: rgb(249,249,249);
		
		.navr{
			background-image: url(../../static/profile_images/bc.jpg);
		}
		// 上半部分
		.selfinfoTop{
			width: 100%;
			border-bottom: 40rpx solid rgb(249,249,249);
			margin-top: 40rpx;
			.info{
				width: 100%;
				height: 100rpx;
				background-color: rgb(255,255,255);
				line-height: 100rpx;
				display: flex;
				border-bottom: 5rpx solid rgb(249,249,249);
				text{
					font-size: 32rpx;
					font-family: "微软雅黑";
					font-weight: 600;
					margin-left: 40rpx;
				}
				.touxiang{
					width: 80rpx;
					height: 80rpx;
					background: #ffaa00;
					border-radius: 99rpx;
					overflow: hidden;
					margin-top: 15rpx;
					margin-left: 490rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.txt{
					width: 70%;
					font-size: 30rpx;
					font-weight: 600;
					color: rgb(166,155,153);
					text-align: right;
					margin-left: 40rpx;
				}
				.seticon{
					width: 50rpx;
					height: 30rpx;
					margin-top: 35rpx;
					margin-left: 20rpx;
				}
			}
		}
		// 下半部分
		.selfinfoDown{
			width: 100%;
			height: 100rpx;
			display: flex;
			background-color: rgb(255,255,255);
			line-height: 100rpx;
			justify-content: space-between;
			border-bottom: 5rpx solid rgb(249,249,249);
			.down_left{	
				margin-left: 40rpx;
				font-size: 32rpx;
				font-family: "微软雅黑";
				font-weight: 600;
				margin: auto 40rpx;
			}
			.down_right{
				margin-right: 40rpx;
				font-size: 30rpx;
				font-weight: 600;
				color: rgb(166,155,153);
			}
		}
	}
</style>
